<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      收益明细
    </div>
    <div class="money">
      <div class="txt">￥ {{ info.data.account }}</div>
      <div class="input">
        <div class="shuru">
          <van-cell-group>
            <van-field
              v-model="money"
              clearable
              type="digit"
              placeholder="请输入提现金额（不小于100元）"
            />
          </van-cell-group>
        </div>
        <div class="button" @click="profitFn">提 现</div>
      </div>
    </div>
    <div class="content" v-for="item in info.data.list" :key="item.id">
      <div class="moneyTime">
        <span :style="item.type == '1' ? 'color: #1AAC19' : 'color: #c80e0e'">{{
          `${item.type == "1" ? "+" : "-"} ${item.account}`
        }}</span>
        <span>{{ item.createTime }}</span>
      </div>
      <div class="text">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import { getPayment, getAccountList, getWithdraw } from "../../../api/http";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const info = reactive({
      data: {},
    });
    const money = ref(null);
    const returnFn = () => {
      router.go(-1);
    };
    const profitFn = async () => {
      const payType = await getPayment({ type: 3 });
      if (!payType.data.card) return navToBankCard();

      if (Number(money.value) <= 0) return proxy.$toast.fail("金额不得小于1元");
      if (Number(money.value) < 100)
        return proxy.$toast.fail("对不起，最小提现金额是100元哦！");
      if (info.data.account < Number(money.value))
        return proxy.$toast.fail("可以提现余额不足，请您确认后重试");

      const data = await getWithdraw({ account: money.value });
      console.log("提现---", data);

      proxy.$dialog
        .alert({
          title: "提现申请已提交",
          theme: "round-button",
          confirmButtonText: "好的",
          closeOnClickOverlay: true,
          width: "244px",
          confirmButtonColor: "#d8b88c",
        })
        .then(() => {
          money.value = null;
          setInfo();
        });
    };
    const navToBankCard = () => {
      proxy.$dialog
        .alert({
          title: "未绑定银行卡",
          theme: "round-button",
          confirmButtonText: "去绑定",
          closeOnClickOverlay: true,
          width: "244px",
          confirmButtonColor: "#d8b88c",
        })
        .then(() => {
          router.push({
            path: "/collectPayMoney",
          });
        });
    };
    const setInfo = async () => {
      const { data } = await getAccountList();
      info.data = data;
      console.log(info);
    };

    onMounted(() => {
      setInfo();
    });
    return {
      returnFn,
      info,
      money,
      proxy,
      profitFn,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
    background-color: #212121;
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }

  .money {
    width: 100%;
    padding: 20px 4%;
    background-image: url(../../../assets/image/profit.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom center;

    .txt {
      color: #fff;
      font-size: 1.7rem;
      margin-top: 20px;
    }

    .input {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .shuru {
        width: 70%;
      }

      .button {
        width: 70px;
        height: 35px;
        border: 1px solid #ffffff;
        border-radius: 30px;
        text-align: center;
        line-height: 35px;
        box-sizing: border-box;
        font-size: 0.8rem;
        color: #fff;
      }

      /deep/ input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #fff;
        /* placeholder字体大小  */
        //  font-size: 12px;
        /* placeholder位置  */
        //  text-align: right;
      }
      .van-cell {
        background-color: transparent;
        padding-left: 0;
        border-bottom: 1px solid #fff;
      }
      /deep/ .van-field__control {
        color: #fff;
      }
    }
  }

  .content {
    width: 100%;
    padding: 18px 4%;
    background-color: var(--backColor);
    color: var(--textColor);
    border-bottom: 1px solid #e5e5e5;

    .moneyTime {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span:nth-child(1) {
        font-size: 1.1rem;
        font-family: PingFang SC;
        font-weight: bold;
      }
      span:nth-child(2) {
        opacity: 0.8;
        font-size: 0.9rem;
      }
    }
    .text {
      opacity: 0.8;
      font-size: 1rem;
      margin-top: 20px;
      line-height: 1.4rem;
    }
  }
}
</style>
